<template>
  <a-modal :visible="visible" title="停止报送" @cancel="$emit('update:visible', false)">
    <a-form :form="form" :selfUpdate="true" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }" v-if="status == 1">
      <a-form-item label="本次停止报送"> {{ recordIds.length }}人 </a-form-item>
      <a-form-item label="税款所属月">
        <a-month-picker
          valueFormat="YYYYMM"
          placeholder="请选择"
          style="width: 100%"
          v-decorator="['period', { rules: [{ required: true, message: '税款所属月不能为空' }] }]"
          allowClear
        />
      </a-form-item>
      <a-form-item label="离职日期">
        <a-date-picker
          valueFormat="YYYY-MM-DD"
          placeholder="请选择"
          style="width: 100%"
          v-decorator="['resignDate', { rules: [{ required: true, message: '离职日期不能为空' }] }]"
          allowClear
        />
      </a-form-item>
    </a-form>
    <a-form :form="formPassword" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }" v-else>
      <a-form-item label="密码类型">
        <a-select
          v-decorator="[
            'passwordType',
            {
              initialValue: 0,
              rules: [
                {
                  required: true,
                  message: '密码类型不能为空'
                }
              ]
            }
          ]"
          placeholder="请选择"
        >
          <a-select-option :value="item.id" v-for="item in typeArr" :key="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="申报密码" v-if="formPassword.getFieldValue('passwordType') == 0">
        <a-input
          placeholder="请输入密码"
          :maxLength="50"
          v-decorator="['declarePassword', { rules: [{ required: true, message: '申报密码不能为空' }] }]"
        />
      </a-form-item>
      <a-form-item label="实名账号" v-if="formPassword.getFieldValue('passwordType') == 2">
        <a-input
          placeholder="请输入账号"
          :maxLength="50"
          v-decorator="['realNameAccount', { rules: [{ required: true, message: '实名账号不能为空' }] }]"
        />
      </a-form-item>
      <a-form-item label="实名密码" v-if="formPassword.getFieldValue('passwordType') == 2">
        <a-input
          placeholder="请输入密码"
          :maxLength="50"
          v-decorator="['realNamePassword', { rules: [{ required: true, message: '实名密码不能为空' }] }]"
        />
      </a-form-item>
    </a-form>
    <div slot="footer" v-if="status == 1">
      <a-button @click="$emit('update:visible', false)"> 取消 </a-button>
      <a-button type="primary" @click="handleOk"> 下一步 </a-button>
    </div>
    <div slot="footer" v-else>
      <a-button @click="onUp"> 上一步 </a-button>
      <a-button type="primary" :loading="confirmLoading" @click="handleOk"> 确认 </a-button>
    </div>
  </a-modal>
</template>

<script>
import { postStopDeclarationSubmit } from "../api";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    companyAuthId: {
      type: String,
      default: ""
    },
    recordIds: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    visible(v) {
      if (v) {
        this.status = 1;
        this.form.resetFields();
        this.formPassword.resetFields();
      }
    },
    status(v) {
      if (v === 2) {
        setTimeout(() => {
          this.formPassword.setFieldsValue({
            passwordType: 0
          });
        });
      }
    }
  },
  created() {},
  data() {
    return {
      confirmLoading: false,
      status: 1,
      form: this.$form.createForm(this, {}),
      period: "",
      resignDate: "",
      formPassword: this.$form.createForm(this, {}),
      typeArr: [
        { id: 0, name: "申报密码" },
        { id: 2, name: "实名密码" }
      ]
    };
  },
  methods: {
    onUp() {
      this.status--;
      setTimeout(() => {
        this.form.setFieldsValue({
          period: this.period,
          resignDate: this.resignDate
        });
      });
    },
    handleOk() {
      if (this.status === 1) {
        this.form.validateFields((err, values) => {
          if (!err) {
            // this.$emit("upDate", values);
            this.period = values.period;
            this.resignDate = values.resignDate;
            this.status++;
          }
        });
      } else {
        this.formPassword.validateFields((err, values) => {
          if (!err) {
            this.onPostStopDeclarationSubmit(values);
          }
        });
      }
    },
    async onPostStopDeclarationSubmit(v) {
      try {
        this.confirmLoading = true;
        await postStopDeclarationSubmit({
          companyAuthId: this.companyAuthId,
          isAll: false,
          period: this.period,
          resignDate: this.resignDate,
          recordIds: this.recordIds,
          ...v
        });
        this.confirmLoading = false;
        this.$notification.success({ message: "操作成功" });
        this.$emit("upDate");
        this.$emit("update:visible", false);
      } catch (err) {
        console.log("error log --> ", err);
        this.confirmLoading = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped></style>
